<template>
	<view class="container">
		<scroll-view scroll-y="true" class="sv">
			<view v-for="item,index in data" :key="index" class="sv-content">
				<text class="title">{{item.title}}</text>
				<view class="postInfo">
					<view class="author">
						<image :src="'http://localhost:8080'+item.authorImage" mode=""></image>
						<text>{{item.authorName}}</text>
					</view>
				</view>
				<text class="content">{{item.content}}</text>
				<image :src="'http://localhost:8080'+item.image" mode="" v-show="item.image"></image>
				<text class="tag">{{item.tagName}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"

	import {
		reactive,
		ref
	} from 'vue';

	const data = ref([])

	function getDate() {
		uni.request({
			url: 'http://localhost:8080/post/list',
			method: 'GET',
			success: res => {
				data.value = res.data.data
				console.log(data.value);
			},
			fail: () => {},
			complete: () => {}
		});
	}

	onLoad(() => {
		getDate()
	})
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
	}

	.content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sv {
		width: 100%;
		height: calc(100vh - 400rpx);
		overflow-y: auto;
	}

	.sv-content {
		padding: 20rpx;
		border-bottom: 1rpx #888 solid;
	}

	.title {
		font-weight: bold;
		font-size: 36rpx;
	}

	.postInfo {
		display: flex;
		align-items: center;
	}

	.author {
		display: flex;
		align-items: center;
	}

	.author image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.tag {
		font-size: 24rpx;
		color: #888;
	}

	image {
		width: 100%;
		margin-top: 20rpx;
	}
</style>